<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "大学",
      address: "北京",
    };
  },
  mounted() {
    /*
			事件总线   可以实现任意组件之间的通信，支持的事件有$on,$off,$emit
			$on进行事件的绑定,对于所有的组件都可以见到，这样可以放到vue的原型方法上
			所以前提是在main.js中安装全局事件总线：	
			beforeCreate() {
				Vue.prototype.$bus = this //安装全局事件总线
			},
	  */
    // console.log('School',this)
    //这里的函数要是methods中的函数如this.hello,或者使用箭头函数，否则会this指针丢失
    //一般载mounted函数中进行绑定事件
    this.$bus.$on("hello", (data) => {
      console.log("我是School组件，收到了数据", data);
    });
  },
  beforeDestroy() {
    //一般载卸载的时候，进行事件的解绑和销毁
    this.$bus.$off("hello");
  },
};
</script>

<style scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>